import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    // 在constructor和super里面传入props参数的作用就是通过props给state一个初始值
    super(props);
    this.state = {
      textValue: props.msg,
      areaValue: "",
      selectValue: "mango",
    };
  }

  handleChange1 = (e) => {
    this.setState({
      textValue: e.target.value,
    });
  };

  handleChange2 = (e) => {
    this.setState({
      areaValue: e.target.value,
    });
  };

  handleChange3 = (e) => {
    this.setState({
      selectValue: e.target.value,
    });
  };

  handleClick = () => {
    console.log("textValue", this.state.textValue);
    console.log("areaValue", this.state.areaValue);
    console.log("selectValue", this.state.selectValue);
  };

  render() {
    return (
      <>
        <h3>普通文本框</h3>
        <input
          type="text"
          value={this.state.textValue}
          onChange={this.handleChange1}
        />

        <hr />

        <h3>多行文本框</h3>
        <textarea
          value={this.state.areaValue}
          onChange={this.handleChange2}
        ></textarea>

        <hr />

        <h3>下拉框</h3>
        <select value={this.state.selectValue} onChange={this.handleChange3}>
          <option value="grapefruit">葡萄柚</option>
          <option value="lime">酸橙</option>
          <option value="coconut">椰子</option>
          <option value="mango">芒果</option>
        </select>

        <button onClick={this.handleClick}>btn</button>
      </>
    );
  }
}

export default App;
